<template>
    <div class="card">
        <div class="title">
        <h4 class="normal">   
            <img class="title_icon" src="../../assets/title.png" alt />
            &nbsp;监控视频
        </h4>
        </div>
        <div class="table_wrap" >
            <el-button @click="initWebSocket()"></el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],
    name: 'VideoMonitor',
    data () {
        return{
            
        }
    },
    mounted() {
        this.initWebSocket();
    },
    created(){
        
    },
    computed: {
    },
    methods: {
        // 初始化 websocket
        initWebSocket() {
            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
            // 初始化weosocket
            this.websock = new WebSocket('ws://10.168.0.24:8080');
                    this.socket.binaryType = 'arraybuffer';
            this.socket.onmessage = (event) => {
                this.handleVideoData(event.data);
            };
            // // 连接错误
            // this.websock.onerror = this.setErrorMessage;
            // // 连接成功
            // this.websock.onopen = this.setOnopenMessage;
            // // 收到消息的回调
            // this.websock.onmessage = this.setOnmessageMessage;
            // // 连接关闭的回调
            // this.websock.onclose = this.setOncloseMessage;
        },
        // 连接错误
        setErrorMessage() {
            console.log("WebSocket连接发生错误");
        },
        // 连接成功∂
        setOnopenMessage() {
            console.log("WebSocket连接成功");
        },
        // 收到消息
        setOnmessageMessage(e) {

        },
        // 连接关闭的回调
        setOncloseMessage() {
            console.log("WebSocket连接关闭");
        },
        // 发送消息
        send(e) {
            this.websock.send(e);
        },
        // 关闭WebSocket连接
        close() {
            this.websock.close();
        },
    },
     // 清除定时器
    beforeDestroy() {
        this.socket.close();
    },
}
</script>

<style scoped>
    
</style>